<template>
  <div v-loading="loading">
    <div
      v-if="show"
      width="100%"
      border="0"
      style="display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center; background: #000000c0;"
    >
      <i class="el-icon-loading" style="width: 110px;font-size: 30px;text-align: center;color: white;margin-bottom: 30px;" />
      <br>
      <span style="font-size: 14px;width: 60px; color: white;">{{ $t('正在加载,请稍等...') }}</span>
    </div>
    <iframe
      id="iframeVue"
      :src="url"
      width="100%"
      frameborder="no"
      border="0"
      append-to-body
      @load="closeLoading"
    />
  </div>
</template>

<script>
import { config } from '@/utils'
import { getToken } from '@/utils/auth'
export default {
  components: {
  },
  data() {
    return {
      show: false,
      // 遮罩层
      loading: false,
      url: null,
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  created() {
  },
  mounted() {
    this.$bus.$emit('async_done')
  },
  methods: {
    // 初始化数据
    init(data) {
      this.onlinePreviewFile(data.fileId, 'view')
    },
    onlinePreviewFile(fileId, type) {
      this.show = true
      type === 'review' ? type = 'review' : type = 'view'
      this.url = config.baseURL + '/onlinePreview?id=' + fileId + '&onlineEditType=' + type + '&Authorization=' + getToken()
    },
    closeLoading(event) {
      if (event !== undefined) {
        this.show = false
        this.calculateHeight()
      }
    },
    // 计算高度
    calculateHeight() {
       $('#iframeVue').height(document.body.clientHeight * 0.82)
    }
  }
}
</script>
